<template>
  <view class="container">
    <view class="logo">
      <image src="http://www.scsysty.org.cn/Content/images/logo/logoName_home.png" />
    </view>
    <view class="form">

        <u--input
          placeholder="请输入账号"
          border="surround"
          v-model="username"
          shape="circle"
        ></u--input>
  <view class="">

    <u--input
      placeholder="请输入密码"
      border="surround"
      v-model="password"
      shape="circle"
      type="password" 
      style="margin-top: 30rpx;"
    ></u--input>
    
  </view>
  <view class="mima">
  忘记密码
  </view>
     
      <button  style="margin-top: 30rpx;" @click="login">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录成功后的处理
      if(this.username=='' ||this.password==''){
        uni.showToast({
          title: '请输入密码或者账号',
          icon: 'error'
        });
      }else{
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
       setTimeout(() => {
         uni.navigateBack({
          delta: 1
         })
       }, 800);
        
     
      }
  
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  height: 90vh;
  /* background-color: #f5f5f5; */
}

.logo {
  margin-bottom: 140rpx;
  margin-top: 250rpx;
}

.logo image {
  width: 620rpx;
  height: 150rpx;
}

.form input {
  width: 300px;
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form button {
  width: 300px;
  height: 40px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}
  
.mima {
  margin-top: 10rpx;
  margin-left: 70%;
  color: skyblue;
}

</style>
